<template>
  <div>
    <el-input
      v-model="form.queryCodeTs"
      placeholder="HS编码"
      @focus="remoteMethod"
    />
    <el-dialog
      title="选择商品编码"
      :visible.sync="dialogVisible"
      width="1150px"
      append-to-body
      :close-on-click-modal="false"
      @close="close"
    >
      <div class="search-box">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          size="mini"
          class="flex-form"
        >
          <el-form-item label="商品编码">
            <el-input
              v-model="form.queryCodeTs"
              placeholder="请输入商品编码"
              clearable
              @keyup.enter.native="getList"
              @input="handleInput"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input
              v-model="form.queryGname"
              placeholder="请输入商品名称"
              clearable
              @keyup.enter.native="getList"
            >
            </el-input>
          </el-form-item>
          <el-form-item label-width="10px">
            <el-button
              type="success"
              plain
              icon="el-icon-search"
              size="mini"
              @click="getList"
            >搜索
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        min-height="600"
        ref="tableList"
        :data="tableData"
        size="mini"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45"></el-table-column>
        <el-table-column
          prop="codeTs"
          label="HS编码"
          align="center"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="gName"
          label="商品名称"
          align="center"
          min-width="250"
        ></el-table-column>
        <el-table-column
          prop="gUnit"
          label="申报计量单位"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bt_unit_type" :value="scope.row.gUnit"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit1"
          label="第一计量单位"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bt_unit_type" :value="scope.row.unit1"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit2"
          label="第二计量单位"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bt_unit_type" :value="scope.row.unit2"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="useTo"
          label="用途"
          align="center"
          min-width="120"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bt_use_to" :value="scope.row.useTo"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="storageEnvm"
          label="存储条件"
          align="center"
          min-width="100"
        >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bt_storage_envm" :value="scope.row.storageEnvm"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="gModel"
          label="规格型号"
          align="center"
          min-width="100"
        >
          <!-- <template slot-scope="scope">
            <dict-tag :options="dict.type.bt_use_to" :value="scope.row.useTo"></dict-tag>
          </template> -->
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button plain @click="close" size="small">关 闭</el-button>
        <el-button type="primary" @click="submitCode" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getGoodsHsCode} from "@/api/swdecl/customsHsGoods";

export default {
  name: "selectHSCode",
  dicts: ['bt_unit_type', 'bt_storage_envm', 'bt_use_to'],
  data() {
    return {
      dialogVisible: false,
      form: {
        queryCodeTs: "",
        queryGname: "",
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      tableData: [],
      selectedCode: {},
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    remoteMethod() {
      this.dialogVisible = true;
      this.getList();
    },
    handleInput(val) {
      this.$emit("handleInputCode", val)
    },
    getList() {
      const params = {
        ...this.queryParams,
        codeTs: this.form.queryCodeTs,
        gName: this.form.queryGname,
      };
      getGoodsHsCode(params).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 控制只能选一条
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.tableList.toggleRowSelection(del_row, false);
      }
      this.selectedCode = selection;
    },
    submitCode() {
      if (this.selectedCode.length > 0) {
        this.form.queryCodeTs = this.selectedCode[0].codeTs;
        this.$emit("handleSelectedHsCode", this.selectedCode[0]);
        this.close();
      } else {
        this.$modal.msgWarning("请选择要关联的商品编码！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  width: 100%;
  margin: 10px 0px;

  ::v-deep .el-form-item {
    width: 30%;
  }
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
}

.dialog-footer {
  text-align: center;
}
</style>
